<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>

      const width = 800 ;
      const height = 600 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");


      // const g = svg.append('g').attr('transform','translate(400,300)')
      // g.append('circle')
      //   .attr('cx',0)
      //   .attr('cy',0)
      //   .attr('r',100)
      //   .attr('fill','#fac')
        
      // g.select('circle')
      //   .transition()
      //   .duration(2000)
      //   .delay(1000)
      //   .attr('r',200)
      //   .attr('fill','#acf')


      const data = ['a','b','c','d'] ;
      const colorScale = d3.scaleOrdinal()
        .domain(data)
        .range(d3.schemeSet3)
      const g = svg.append('g').attr('transform','translate(100,100)')
      
      g.selectAll('circle')
        .data(data)
        .join('circle')
        .attr('cx',(d,i)=>i*100 + 50)
        .attr('cy',50)
        .attr('r',45)
        .attr('fill',d=>colorScale(d))
      
      g.transition()
        .duration(2000)
        .attr('transform','translate(100,300)') 
          .selectAll('circle')
          .transition(2000)
          .delay((d,i)=>i*1000)
          .attr('fill',(d,i)=>i===data.length-1?colorScale(data[0]):colorScale(data[i+1]))

    </script>
  </body>
</html>
